<template>
  <div id="login">
    <input type="button" value="组件更新按钮" @click="update">
    <input type="button" value="组件销毁按钮" @click="destroy">
    {{msg}}
    <home></home>
    <news></news>
    <aaa></aaa>
  </div>
</template>

<script>
import Home from "./components/login/Home.vue";
import News from "./components/login/News.vue";
//替代了Vue.extend()
var TemplateComponent = {
  template: "<h3>测试Vue2.0新特性，component</h3>"
};
export default {
  name: "login",
  data() {
    return {
      msg: "这里是登录页面"
    };
  },
  beforeCreate() {
    console.log("组件实例刚刚创建");
  },
  created() {
    console.log("实例已经创建完成");
  },
  beforeMount() {
    console.log("模板编译之前");
  },
  mounted() {
    console.log("模板编译完成，相当于之前的ready（重要）");
  },
  //vue2.0新增的生命周期
  beforeUpdate() {
    console.log("组件更新之前");
  },
  updated() {
    console.log("组件更新完毕,用来监听组件的变化（重要）");
  },
  beforeDestroy() {
    console.log("组件销毁之前");
  },
  destroyed() {
    console.log("组件销毁完毕");
  },
  //一些组件
  components: {
    home: Home,
    news: News,
    aaa: TemplateComponent
  },
  //一些方法
  methods: {
    update() {
      this.msg = "哈喽，你好！我用了";
    },
    destroy(){
      this.$destroy();
    }
  }
};
//Vue.component('aaa',TemplateComponent);
</script>

<style lang="scss">
</style>
